<template>
    <div>
        <el-tabs v-model="activeTab">
            <el-tab-pane label="发送私信" class="bt">
                <el-form :model="messageForm" label-width="80px">
                    <el-form-item label="接收者" class="bt">
                        <el-select v-model="messageForm.receiverId" placeholder="请选择接收者" >
                            <el-option v-for="user in users" :key="user.id" :label="user.username" :value="user.id" class="select"></el-option>
                        </el-select>

                    </el-form-item>
                    <div class="chat-container" v-if="sentMessages !== null">
                        <div class="chat-message" v-for="message in sentMessages" :key="message.id">
                            <p class="sender">发送给{{ getUsername(message.receiverId) }}</p>
                            <p class="content">{{ message.content }}</p>
                            <p class="time">{{ message.createTime }}</p>
                        </div>
                    </div>
                    <div v-else>
                        <p>暂无发送的私信</p>
                    </div>
                    <el-form-item label="内容">
                        <el-input type="textarea" v-model="messageForm.content"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: center">
                    <el-button type="primary" @click="sendMessage" class="btn">发送</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="查看私信">
                <div class="chat-container" v-if="messages !== null">
                    <div class="chat-message" v-for="message in messages" :key="message.id">
                        <p class="sender">{{ getUsername(message.senderId) }}</p>
                        <p class="content">{{ message.content }}</p>
                        <p class="time">{{ message.createTime }}</p>
                    </div>
                </div>
                <div v-else>
                    <p>暂无私信</p>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            activeTab: 'send',
            messageForm: {
                receiverId: '',
                content: ''
            },
            users: [],
            messages: [],
            sentMessages: []
        };
    },
    mounted() {
        this.getUsers();
        this.getMessages();
        this.getSentMessages(); // 调用新的方法获取我发送的私信
    },
    methods: {
        getUsers() {
            axios.get('/api/backendUser')
                .then(response => {
                    this.users = response.data.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        sendMessage() {
            axios.post('/api/send', this.messageForm)
                .then(() => {
                    this.messageForm.content = '';
                    this.getSentMessages();
                    this.$message.success('发送成功');
                })
                .catch(error => {
                    console.error(error);
                });
        },
        getMessages() {
            axios.get('/api/messages')
                .then(response => {
                    this.messages = response.data.data;
                    this.getSenderUsernames(); // 获取发送者用户名
                })
                .catch(error => {
                    console.error(error);
                });
        },
        getUsername(senderId) {
            const user = this.users.find(user => user.id === senderId);
            return user ? user.username : '';
        },
        getSenderUsernames() {
            this.messages.forEach(message => {
                axios.get(`/api/users/${message.senderId}`)
                    .then(response => {
                        const user = response.data;
                        message.senderUsername = user ? user.username : '';
                    })
                    .catch(error => {
                        console.error(error);
                    });
            });
        },
        getSentMessages() {
            axios.get('/api/MyMessAges')
                .then(response => {
                    this.sentMessages = response.data.data;
                    this.getSenderUsernames();
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
};
</script>
<style scoped>
.chat-container {
    height: 500px;
    overflow-y: scroll;
    padding: 10px;
}

.chat-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.chat-message .sender {
    font-weight: bold;
    margin-bottom: 5px;
}

.chat-message .content {
    background-color: #f2f2f2;
    padding: 5px 10px;
    border-radius: 5px;
    max-width: 70%;
}

.chat-message .time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.chat-input {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.chat-input input {
    flex: 1;
    margin-right: 10px;
}

.chat-input button {
    width: 80px;
}
.select {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    color: blue;
    padding: 5px;

}
.select:hover{
    cursor:pointer;
}
.bt:hover{
    cursor:pointer;

}

</style>
